// index.js
const raterpx = 750 / wx.getSystemInfoSync().windowWidth;
const rate = function (rpx) { return rpx / raterpx };
Page({
  data: {

  },
  /**
   * 设置多行文本在画布
   * @param {*} ctx 画布
   * @param {*} text 文本
   * @param {*} numX X坐标
   * @param {*} numY Y坐标
   * @param {*} textWidth 宽度
   * @param {*} lineHeight 行高
   * @param {*} rowNum 行数
   */
  textHandle(ctx, text, numX, numY, textWidth, lineHeight, rowNum) {
    var chr = text.split(""); // 将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < textWidth) {
        temp += chr[a];
      } else {
        a--; // 添加a--，防止字符丢失
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);
    for (var b = 0; b < row.length; b++) {
      if (b < rowNum) {
        ctx.fillText(row[b], numX, numY + b * lineHeight);
      }
    }
  },
  canvas() {
    let that = this;
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(res)
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        // 获取设备像素比调整画布尺寸，并缩放坐标系
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        // 根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。
        ctx.scale(dpr, dpr)

        // 画布颜色及大小
        ctx.fillStyle = "#f7f7f7";
        ctx.fillRect(rate(0), rate(0), rate(670), rate(1100));

        // 设置图形的填充颜色
        ctx.fillStyle = "blue";
        // 设置图形的轮廓颜色
        ctx.strokeStyle = "red";

        // 单行文本
        ctx.font = "30px serif";
        ctx.textAlign = "center";
        ctx.fillText("Hello world!", rate(330), rate(400), rate(600));

        // 多行文本
        ctx.font = "bold 16px serif";
        ctx.textAlign = "left";
        ctx.fillStyle = "black";
        that.textHandle(ctx, "使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法", rate(30), rate(500), rate(600), rate(40), 6);

        // 设置线段厚度的属性（即线段的宽度）
        ctx.lineWidth = rate(10);

        // Wall
        // 使用当前的笔触样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形框。
        ctx.strokeRect(rate(75), rate(140), rate(150), rate(110));

        // Door
        // 绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height 。
        ctx.fillRect(rate(130), rate(190), rate(40), rate(60));

        // Roof
        // 通过清空子路径列表开始一个新路径的方法。
        ctx.beginPath();
        // 将一个新的子路径的起始点移动到(x，y)坐标
        ctx.moveTo(rate(50), rate(140));
        // 使用直线连接子路径的终点到x，y坐标的方法
        ctx.lineTo(rate(150), rate(60));
        ctx.lineTo(rate(250), rate(140));
        // 将笔点返回到当前子路径起始点的方法
        ctx.closePath();
        // 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(rate(400), rate(700), rate(100), 0, 2 * Math.PI);
        ctx.stroke();

        // 创建一个新的、空白的、指定大小的 Image 对象
        let image = canvas.createImage();
        image.src = "../2.gif";
        image.onload = function (res) {
          console.log('onload成功', res)

          // 绘制圆弧路径的方法
          // ctx.arc(rate(300), rate(950), rate(100), 0, 2 * Math.PI, false);
          // 将当前创建的路径设置为当前剪切路径的方法
          // ctx.clip();

          // 绘制图像
          // ctx.drawImage(image, rate(200), rate(850), rate(200), rate(200));

          that.circleImg(ctx, image, rate(200), rate(850), rate(100));
        }
        image.onerror = function (res) {
          console.log('onload失败')
        }

      })
  },

 /**
 * canvas 生成圆角图片（头像等）
 * @param {*} ctx 画布
 * @param {*} img 图片
 * @param {*} x X坐标
 * @param {*} y Y坐标
 * @param {*} r 半径
 */
  circleImg(ctx, img, x, y, r) {
    ctx.save();
    var d = 2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
  },
  onLoad() {
    this.canvas()
  },
})
